<template>
	<view class="dialog">
		<u-cell-group v-if="chatGroup.length > 0">
		  <u-cell v-for="(item,index) in chatGroup" :key="index" clickable @click="toDialogDetails(item)">
				<template #title>
 						<view class="flex">
							<u--image :showLoading="true" :src="item.latestMessage.admin.avatar" width="80rpx" height="80rpx" />
							<view class="flexCol ml10">
								<text>{{ item.latestMessage.admin.userName || item.title || '未命名对话' }}</text>
								<text v-if="item.latestMessage.content" class="u-line-1">{{ item.latestMessage.content }}</text>
							</view>
						</view>
				</template>
			</u-cell>
	  </u-cell-group>
		<u-empty
				v-else
		    :icon="errorImage"
				text="数据为空"
		/>
		<Ctabbar />
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import errorImage from '@/static/empty/NullData.png'
	export default {
		name: 'Dialog', // 对话页面
		options: { styleIsolation: "shared" }, // 父组件设置 options.styleIsolation 可穿透子组件，以及页面
		data() {
			return {
				errorImage: errorImage,
				user: {
					id: this.$store.state.user.userInfo.userId,
					userType: 'user'
				}
			}
		},
		computed: {
			...mapGetters(['userInfo', 'chatGroup', 'token'])
		},
		onShow() {
			// 未登录弹出对话框
			!this.token && this.loginToast()
		},
		methods: {
			// 跳转到聊天详情
			toDialogDetails({ groupId, title }) {
				uni.navigateTo({
					url: `/pages/dialog/dialogDetails/dialogDetails?groupId=${groupId}&title=${title}`,
					animationType: 'pop-in',
					animationDuration: 200
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.dialog{
	/deep/ .u-cell{
		background: #ffffff;
		margin: 20rpx 0;
		&__body{
			padding: 10rpx 20rpx !important;
		}
	}
	/deep/ .u-empty{
		&__body{
			padding: 5rpx 20rpx !important;
		}
		uni-image{
			width: 700rpx !important;
			height: 700rpx !important;
		}
		&__text{
			font-size: 34rpx !important;
		}
	}
}
</style>
